<template>
  <div>
    <div class="nav" @click="btn">
      <div class="ncent">
        <div class="cent">{{val}}</div>
        <div class="leftcent">{{text}}</div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["val", "text"],
  methods: {
    btn() {
      console.log("条形组件被点击啦");
      this.$emit("barClick");
    }
  }
};
</script>

<style  lang="less" scoped>
.nav {
  padding-left: 5.556vw;
  .ncent {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 0.278vw solid #cccccc;
    .cent {
      flex: 1;
      color: cornsilk;
    }
    .leftcent,
    .iconjiantou1 {
      color: darkgrey;
    }
    .iconjiantou1 {
      margin: 0 4.167vw;
    }
  }
}
</style>